<template>
  <div class="wraper">
    <template>
      Scroll down to see the bottom-right button.
      <el-backtop target=".wraper">
        <div class="back-ball">
          回到顶部
        </div>
      </el-backtop>
    </template>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <h1>滚动内容部分</h1>
    <div class="aaa">1111</div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="less" scoped>
.wraper {
        height: 100vh;
        border: 4px solid red;
        // overflow: hidden;
        // overflow-x: hidden;
        overflow-y: scroll;
    }
 
    .back-ball {
        background-color: tomato;
        color: #fff;
        border-radius: 22px;
        padding: 10px;
    }
    .aaa{
        height: 1000px;
    }
</style>
